<template>
	<div class="query-source-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-form :inline="true" :model="formInline" size="mini">
				<el-form-item label-width="100px" label="文书编号">
					<el-input v-model="formInline.caseNo" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label-width="100px" label="案件性质">
					<el-input v-model="formInline.invNo" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label-width="100px" label="物品编号">
					<el-input v-model="formInline.eviNo" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 20px">
					<el-button type="primary" @click="init" icon="el-icon-search" size="small">查询</el-button>
				</el-form-item>
			</el-form>
			<div style="height: 20px"></div>
			<Timeline ref="timeLineRef" :sourceTimeLine="sourceTimeLine" v-show="showTimeLine"></Timeline>

			<el-table
				ref="multipleTable"
				:data="tableData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				:row-style="{ height: '40px' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				style="width: 100%; margin-top: 30px"
				highlight-current-row
				:row-class-name="tableRowClassName"
				@selection-change="handleSelectionChange"
			>
				<el-table-column align="center" label="序号" type="index" fixed="left" width="60" />
				<el-table-column align="center" property="caseNo" sortable prop="caseNo" label="文书编号" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column
					align="center"
					property="inspectionNo"
					sortable
					prop="inspectionNo"
					width="180"
					fixed="left"
					label="案件性质"
					show-overflow-tooltip
				/>
				<el-table-column align="center" property="caseName" sortable label="案件名称" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="no" sortable label="物品编号" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="name" sortable label="物品名称" width="120" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="quantity" sortable label="数量" width="80" show-overflow-tooltip />
				<el-table-column align="center" property="className" sortable label="物品类别" width="120" show-overflow-tooltip />
				<el-table-column align="center" property="status" sortable label="状态" width="80" show-overflow-tooltip />
				<el-table-column align="center" property="location" sortable label="存放位置" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="evidenceSource" sortable label="规格型号" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="shape" sortable label="物品属性" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionOrganName" sortable label="物品单位" width="120" show-overflow-tooltip />
				<el-table-column align="center" property="extractionPersonName" sortable label="颜色" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionDateTime" sortable label="获取时间" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractMethod" sortable label="获取方式" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionParts" sortable label="产地" width="100" show-overflow-tooltip />
				<el-table-column align="center" label="操作" fixed="right" width="160">
					<template #default="scope">
						<el-button type="success" @click="loadTimeLine(scope.row)" plain size="mini">溯源</el-button>
						<el-button type="primary" @click="onDetailsInfo(scope.row)" plain size="mini">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useStore } from '/@/store/index';
import { useRouter } from 'vue-router';
import Timeline from './component/timeline.vue';
import { querySource } from '/@/api/query/index';

export default {
	name: 'querySource',
	components: { Timeline },
	setup() {
		const store = useStore();
		const router = useRouter();

		const timeLineRef = ref();
		const state = reactive({
			showTimeLine: false,
			formInline: {
				caseNo: '',
				invNo: '',
				eviNo: '',
			},
			tableData: [],
			sourceTimeLine: [],
		});

		const loadTimeLine = (row) => {
			timeLineRef.value.loadTimeLine(row.no, row.organId);
		};

		async function init() {
			if (!state.formInline.caseNo && !state.formInline.invNo && !state.formInline.eviNo) {
				ElMessage({ message: '请至少输入一个条件', type: 'warning' });
				return;
			}
			await querySource(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.sourceList;
					//state.sourceTimeLine = res.data.sourceTimeLine;
					if (state.tableData.length > 0) {
						state.showTimeLine = true;
						timeLineRef.value.loadTimeLine(state.tableData[0].no, state.tableData[0].organId);
					}
				}
			});
		}

		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.id },
			});
		};

		return {
			init,
			loadTimeLine,
			timeLineRef,
			onDetailsInfo,
			...toRefs(state),
		};
	},
};
</script>
